<template>
	<div class="modal-mask" v-show="modalShow">
		<div
			class="ui-modal"
			ref="uiModal"
			:style="{
				width: width + 'px',
				borderRadius: borderRadius + 'px',
				marginLeft: -width/2 + 'px',
				top: position === 'center' ? '50%' : '100px',
				marginTop: position === 'center' ? -uiModalHeight/2 + 'px' : ''
			}"
		>
			<header 
				class="header"
				:style="{
					color: headerTextColor,
					backgroundColor: headerColor
				}"
			>
				<h1 class="title">{{headerText}}</h1>
				<a href="javascript:;" @click="cancel" :style="{color: headerTextColor}">&times;</a>
			</header>
			<article class="content">
				<p
					:style="{color: contentTextColor}"
				>{{contentText}}</p>
			</article>
			<div class="btn-group" v-if="btnGroupShow">
				<button class="btn btn-confirm" @click="confirm" :style="{backgroundColor: headerColor, color: headerTextColor}">{{confirmText}}</button>
				<button class="btn btn-cancel" @click="cancel">{{cancelText}}</button>
			</div>
		</div>
	</div>
</template>

<script>
	import { ref, toRefs, reactive, onMounted } from 'vue'
	export default{
		name: 'TModal',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			width: {
				type: Number,
				default: 450
			},
			borderRadius: {
				type: Number,
				default: 0
			},
			headerColor: {
				type: String,
				default: '#007bff'
			},
			headerText: {
				type: String,
				default: ''
			},
			headerTextColor: {
				type: String,
				default: '#fff'
			},
			contentText: {
				type: String,
				default: ''
			},
			contentTextColor: {
				type: String,
				default: '#000'
			},
			position: {
				type: String,
				default: 'top'
			},
			btnGroupShow: {
				type: Boolean,
				default: false
			},
			confirmText: {
				type: String,
				default: "确认"
			},
			cancelText: {
				type: String,
				default: '取消'
			}
		},
		setup(props, ctx) {
			const uiModal = ref(null)
			const state = reactive({
				uiModalHeight: 0,
				modalShow: props.show
			})
			onMounted(() => {
				state.uiModalHeight = uiModal.value.offsetHeight
			})
			
			const confirm = ()=> {
				state.modalShow = false
				ctx.emit('confirm')
			}
			
			const cancel = ()=> {
				state.modalShow = false
				ctx.emit('close')
			}
			
			return {
				uiModal,
				...toRefs(state),
				confirm,
				cancel
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		
		.slide-fade-enter-active {
		  transition: all .6s ease-out;
		}
		
		.slide-fade-leave-active {
		  transition: all .6s cubic-bezier(1, 0.5, 0.8, 1);
		}
		
		.slide-fade-enter-from,
		.slide-fade-leave-to {
		  transform: translateY(-20px);
		  opacity: 0;
		}
		
		a{
			text-decoration: none;
			outline: none;
			color: #333;
		}
		
		h1,p{
			font-weight: normal;
			margin: 0;
		}
		
		button{
			outline: none;
			border: none;
		}
		
		.ui-modal:hover{
			box-shadow: 0px 0px 5px #7a7a7a;
		}
		
		.ui-modal{
			position: fixed;
			left: 50%;
			overflow: hidden;
			background-color: #fff;
			box-shadow: 0px 0px 3px #7a7a7a;
			
			.header{
				height: 44px;
				padding: 0 15px;
				box-sizing: border-box;
				
				h1{
					display: inline-block;
					font-size: 17px;
					line-height: 44px;
					width: 90%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				
				a{
					float: right;
					font-size: 20px;
					margin-top: 6px;
				}
				a:hover{
					opacity: .8;
				}
			}
			
			.content{
				padding: 40px 20px;
				box-sizing: border-box;
			}
			
			.btn-group{
				height: 30px;
				padding: 10px 15px;
				border-top: 1px solid #ddd;
				
				.btn{
					float: right;
					min-width: 80px;
					height: 30px;
					font-size: 14px;
					border-radius: 3px;
					cursor: pointer;
					
					&.btn-confirm{
						color: #fff;
						margin-left: 15px;
					}
					&.btn-confirm:hover{
						opacity: .8;
					}
					
					&.btn-cancel{
						background-color: #ddd;
						color: #666;
					}
					&.btn-cancel:hover{
						opacity: .8;
					}
				}
			}
		}
	}
</style>
